<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>略略</title>
	<meta name="keywords" content="desktop">
	<meta name="description" content="desktop">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/index.css" />
	<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/Highcharts.js"></script>
	<script src="js/index.js"></script>
	<script>
	$(window.parent.document).find(".ifames").load(function(){
     var main = $(window.parent.document).find(".ifames");
     var thisheight = $(document).height()+30;
     main.height(thisheight);
     });
	</script>
</head>

<body>

	<!-- 窗体主内容 -->
	<section class="ifame-box">

		<!-- 条件 -->
         <div class="ifame-top">
			 <div class="row mabot15">
				<div class="col-md-4">
						<div class="form-group">
								<label class="control-label col-md-3">开始时间</label>
								<div class="col-md-9">
									<input type="text" class="form-control input-sm"  placeholder="开始时间">
								</div>
						</div>
				</div>
				<div class="col-md-4">
						<div class="form-group">
								<label class="control-label col-md-3">结束时间</label>
								<div class="col-md-9">
									<input type="text" class="form-control input-sm"  placeholder="结束时间">
								</div>
						</div>
				</div>
				<div class="col-md-4 text-right ">
                         <a href="#" class="btn contbn">搜索</a>
				</div>
			 </div>


			 <div class="row matop20">
					<div class="col-md-3 col-sm-6">
							<div class="dashboard-tile detail tile-zsi">
								<div class="content">
									<h1 class="text-left timer">200</h1>
									<p>开单量</p>
								</div>
								<div class="icon"><i class="iconfont">&#xe78c;</i>
								</div>
							</div>
						</div>
					<div class="col-md-3 col-sm-6">
							<div class="dashboard-tile detail tile-red">
								<div class="content">
									<h1 class="text-left timer">17,561</h1>
									<p>开单金额</p>
								</div>
								<div class="icon"><i class="iconfont">&#xe78c;</i>
								</div>
							</div>
						</div>
			
			 </div>
              
		 </div>
		<!-- 条件 -->


		<!-- 表格 -->
		 <div class="ifame-conbox matop40 row">

			<div class="row">
					<div class="col-md-6">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">开单量数据图表</h3>
									<div class="actions pull-right">
										<i class="iconfont">&#xe600;</i>							
									</div>
								</div>
								<div class="panel-body" >
										<div id="container" style="min-width:400px;height:234px"></div>
								</div>
							</div>
						</div>

						<div class="col-md-6">
								<div class="panel panel-default">
									<div class="panel-heading">
										<h3 class="panel-title">开单商户排行</h3>
										<div class="actions pull-right">
											<i class="iconfont">&#xe600;</i>							
										</div>
									</div>
									<div class="panel-body thktabel" style="padding:0;height:265px;" >
											<table class="table table-striped">
													<thead>
														<tr>
															<th>商户名称</th>
															<th>开单量</th>
															<th>占比</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td class="uin"><em></em><span >东东五金</span></td>
															<td>1000</td>
															<td>20%</td>
														</tr>
														<tr>
																<td class="uin"><em></em><span >东东五金</span></td>
																<td>1000</td>
																<td>20%</td>
															</tr>
															<tr>
																	<td class="uin"><em></em><span >东东五金</span></td>
																	<td>1000</td>
																	<td>20%</td>
																</tr>
						
													</tbody>
												</table>
									</div>
								</div>
							</div>

		
			</div>

			<div class="row">
				  
					<div class="col-md-6">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">商品销售排行</h3>
									<div class="actions pull-right">
										<i class="iconfont">&#xe600;</i>							
									</div>
								</div>
								<div class="panel-body thktabel" style="padding:0; height:265px;" >
										<table class="table table-striped">
												<thead>
													<tr>
														<th>商品名称</th>
														<th>销量</th>
														<th>占比</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="uin"><em></em><span >螺丝</span></td>
														<td>1000</td>
														<td>20%</td>
													</tr>
													<tr>
															<td class="uin"><em></em><span >油漆</span></td>
															<td>22223</td>
															<td>30%</td>
														</tr>	
														<tr>
																<td class="uin"><em></em><span >螺丝</span></td>
																<td>1000</td>
																<td>20%</td>
															</tr>
															<tr>
																	<td class="uin"><em></em><span >油漆</span></td>
																	<td>22223</td>
																	<td>30%</td>
																</tr>
																<tr>
																		<td class="uin"><em></em><span >螺丝</span></td>
																		<td>1000</td>
																		<td>20%</td>
																	</tr>
																	<tr>
																			<td class="uin"><em></em><span >油漆</span></td>
																			<td>22223</td>
																			<td>30%</td>
																		</tr>					
												</tbody>
											</table>
								</div>
							</div>
						</div>



					<div class="col-md-6">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">开单量数据图表</h3>
									<div class="actions pull-right">
										<i class="iconfont">&#xe600;</i>							
									</div>
								</div>
								<div class="panel-body" >
										<div id="container2" style="min-width:400px;height:234px"></div>
								</div>
							</div>
						</div>

		

		
			</div>
				 
		
			    
		 </div>
		<!-- 表格 -->

	</section>
	<!-- 窗体主内容 -->

	<script>
			$(function () {
			$('#container').highcharts({
				credits: {  
          enabled:false  
},  
				chart: {
					type: 'spline'
				},
				title: {
					text: ''
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					categories: ['一月', '二月', '三月', '四月', '五月', '六月',
								 '七月', '八月', '九月', '十月', '十一月', '十二月']
				},
				yAxis: {
					title: {
						text: ''
					},
					labels: {
						formatter: function () {
							return this.value + '单';
						}
					}
				},
				tooltip: {
					crosshairs: true,
					shared: true
				},
				plotOptions: {
					spline: {
						marker: {
							radius: 4,
							lineColor: '#666666',
							lineWidth: 1
						}
					}
				},
				series: [{
					name: ' 波波五金',
					marker: {
						symbol: 'square'
					},
					data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
						y: 26.5
					}, 23.3, 18.3, 13.9, 9.6]
				}]
			});
		});
		</script>

<script>
		$(function () {
		$('#container2').highcharts({
			credits: {  
          enabled:false  
},  
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			title: {
				text: ''
			},
			tooltip: {
				headerFormat: '{series.name}<br>',
				pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: false
					},
					showInLegend: true
				}
			},
			series: [{
				type: 'pie',
				name: '城市开单占比',
				data: [
					['广州市',   45.0],
					['佛山市',       26.8],
					{
						name: '上海市',
						y: 12.8,
						sliced: true,
						selected: true
					},
					['中山',    8.5],
					['深圳',     6.2],
					['其他城市',   0.7]
				]
			}]
		});
	});
	</script>
		

</body>


</html>